<template>
  <div class="content">
    <div>
      <a-button @click="close" type="text" class="iconColor">
        <template #icon>
          <icon-left />
        </template>
      </a-button>

      <span style="margin-left: 120px; font-weight: bold">按群聊选</span>
    </div>
    <a-checkbox-group
      v-model="checkboxKey"
      @change="getcheckboxVal"
      class="personnel-list"
    >
      <template v-for="(item, index) in groupList" :key="item.id">
        <a-checkbox class="item" :value="item.id">
          <a-space>
            <PersonnelIcon
              :backgroundColor="isColor(index)"
              :name="item.name"
              :headPortraits="item.headPortrait[0]"
            />
            <div>
              {{ item.name }}
            </div></a-space
          >
        </a-checkbox>
      </template>
    </a-checkbox-group>

    <!-- <div>
  
      </div> -->
  </div>
</template>
<script setup lang="ts">
import { GetHumanRosterList } from '@/apis/management/human/humanRoster';
import { getContactGroupList } from '@/apis/client/addressBook/index';
import PersonnelIcon from './PersonnelIcon.vue';
const props = withDefaults(
  defineProps<{
    visible: boolean;
    checkboxDataList?: any;
    checkboxKey?: any;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits([
  'update:visible',
  'update:checkboxDataList',
  'update:checkboxKey'
]);
const listType = ref<any>(null);
const close = () => {
  emit('update:visible', false);
};
// const checkboxVal = ref();
const params = reactive({ pageNumber: 0, pageSize: -1 });
const groupList = ref();
const getGroupList = async () => {
  try {
    const res = await getContactGroupList(params);
    groupList.value = res.content || [];
    console.log(21, groupList.value);
  } catch (err: unknown) {
    console.log(err);
  }
};
getGroupList();

const checkboxListData = computed({
  get: () => props.checkboxDataList,
  set: (val) => {
    emit('update:checkboxDataList', val);
  }
});
const checkboxKey = computed({
  get: () => props.checkboxKey,
  set: (val) => emit('update:checkboxKey', val)
});
const color = ['#0089ff', '#cdf5b0', '#ffe2da'];
const isColor = (index: number) => {
  if (index <= color.length - 1) {
    return color[index];
  } else {
    return color[(index + 1) % color.length];
  }
};

const getcheckboxVal = (val: any) => {
  console.log(9, val, groupList.value);
  let newAddr = [];
  val.forEach((item: any) => {
    newAddr.push({
      ...JSON.parse(
        JSON.stringify(groupList.value.filter((ele) => ele.id === item)[0])
      ),
      listType: 2
    });
  });
  checkboxListData.value = newAddr;
  console.log(213, checkboxListData.value);
};
</script>

<style>
/* :deep(.arco-input-outer),
    :deep(.arco-input-append) {
      border-left: 1px solid #fff;
      border: 1px solid var(--color-neutral-4);
    }
    
    .wrap {
      display: flex;
    }
    
    .left-content {
      width: 50%;
      padding-right: 10px;
      border-right: 1px solid var(--color-neutral-4);
      .iconBox {
        padding: 10px;
        display: flex;
        justify-content: space-around;
      }
    }
    .right-content {
      width: 50%;
      padding: 10px;
    } */

/* :deep(.arco-divider),
    :deep(.arco-divider-horizontal) {
      margin: 5px 0;
    } */

.content {
  width: 100%;
  /* padding: 10px; */
  margin-top: 10px;
}

.personnel-list {
  display: inline-flex;
  flex-direction: column;
  height: 300px;
  overflow: auto;
  width: 100%;
  .item {
    height: 100px;
    padding: 10px;
    margin: 10px 0;
    display: flex;

    &:hover {
      background: #f7f7f7;
      border-radius: 5px;
      cursor: pointer;
    }
    .person-right {
      flex: 1;
      padding: 0 8px;

      &-name {
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
        width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &-msg {
        font-size: 14px;
        color: #999;
        overflow: hidden;
        width: 150px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .msg-tip {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-top {
        color: #afafaf;
      }
    }
  }
}

/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  z-index: 100;
  width: 6px;
  height: 6px;
  background-color: #fff;
}

/* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  z-index: 100;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  z-index: 100;
  background-color: rgb(169 169 169 / 50%);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}
</style>
